<template>
  <!-- 搜索区域：包含订单搜索表单，允许用户根据多种条件筛选订单 -->
  <div class="search-container">
    <!-- 搜索表单卡片：使用Element Plus的卡片组件包装搜索表单 -->
    <el-card shadow="never" class="search-card">
      <!-- 表单容器：使用Element Plus的表单组件，支持内联布局 -->
      <el-form :inline="true" :model="searchForm" class="search-form" label-width="80px">
        <!-- 订单编号搜索项：允许用户通过订单编号精确查找订单 -->
        <el-form-item label="订单编号">
          <el-input v-model="searchForm.orderNumber" placeholder="请输入订单编号" clearable @keyup.enter="handleSearch"
            class="search-input" />
        </el-form-item>

        <!-- 客户名称搜索项：允许用户通过客户名称模糊查找订单 -->
        <el-form-item label="客户名称">
          <el-input v-model="searchForm.customerName" placeholder="请输入客户名称" clearable @keyup.enter="handleSearch"
            class="search-input" />
        </el-form-item>

        <!-- 订单状态搜索项：允许用户通过订单状态筛选订单 -->
        <el-form-item label="订单状态">
          <el-select v-model="searchForm.status" placeholder="请选择订单状态" clearable @change="handleSearch"
            class="search-select">
            <!-- 遍历订单状态配置，生成下拉选项 -->
            <el-option v-for="status in orderStatusConfig.statusOptions" :key="status.value" :label="status.label"
              :value="status.value" />
          </el-select>
        </el-form-item>

        <!-- 订单日期范围搜索项：允许用户通过日期范围筛选订单 -->
        <el-form-item label="订单日期">
          <el-date-picker v-model="searchForm.orderDateRange" type="daterange" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" clearable @change="handleSearch"
            class="date-range-picker">
          </el-date-picker>
        </el-form-item>

        <!-- 婴儿名称搜索项：允许用户通过婴儿名称模糊查找订单 -->
        <el-form-item label="婴儿名称">
          <el-input v-model="searchForm.babyName" placeholder="请输入婴儿名称" clearable @keyup.enter="handleSearch"
            class="search-input" />
        </el-form-item>

        <!-- 产品名称搜索项：允许用户通过产品名称模糊查找订单 -->
        <el-form-item label="产品名称">
          <el-input v-model="searchForm.productName" placeholder="请输入产品名称" clearable @keyup.enter="handleSearch"
            class="search-input" />
        </el-form-item>

        <!-- 操作按钮组：包含搜索和重置按钮 -->
        <el-form-item class="button-group">
          <!-- 搜索按钮：触发订单搜索操作 -->
          <el-button type="primary" @click="handleSearch" class="search-button">
            <el-icon>
              <Search />
            </el-icon>
            搜索
          </el-button>
          <!-- 重置按钮：清空搜索条件并重新加载所有订单 -->
          <el-button @click="handleReset" class="reset-button">
            <el-icon>
              <Refresh />
            </el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>

  <!-- 表格区域：展示订单列表数据 -->
  <el-card class="table-card">
    <!-- 表格头部：包含标题和操作按钮 -->
    <template #header>
      <div class="table-header">
        <!-- 表格标题 -->
        <span>销售订单列表</span>
        <!-- 操作按钮组：包含打印和新增订单按钮 -->
        <div>
          <!-- 显示选中行数 -->
          <el-tag v-if="selectedOrders.length > 0">已选择 {{ selectedOrders.length }} 项</el-tag>
          <!-- 导出Excel按钮：导出当前列表数据为Excel文件 -->
          <el-button type="success" @click="handleExportExcel">
            <el-icon>
              <Download />
            </el-icon>
            导出Excel
          </el-button>
          <!-- 打印按钮：触发订单列表打印功能 -->
          <el-button type="primary" @click="handleOrderListPrint">
            <el-icon>
              <Printer />
            </el-icon>
            订单列表打印
          </el-button>
          <!-- 批量删除按钮：删除选中的订单 -->
          <el-button type="danger" @click="handleBatchDelete" :disabled="selectedOrders.length === 0">
            <el-icon>
              <Delete />
            </el-icon>
            批量删除
          </el-button>
          <!-- 批量修改状态按钮：修改选中订单的状态 -->
          <el-button type="warning" @click="handleBatchUpdateStatus" :disabled="selectedOrders.length === 0">
            <el-icon>
              <Edit />
            </el-icon>
            批量修改状态
          </el-button>
          <!-- 新增订单按钮：跳转到新增订单页面 -->
          <el-button type="primary" @click="handleAdd">
            <el-icon>
              <Plus />
            </el-icon>
            新增订单
          </el-button>
        </div>
      </div>
    </template>

    <!-- 订单数据表格：使用Element Plus的表格组件展示订单数据 -->
    <!-- el-table: Element Plus表格组件 -->
    <el-table border :data="orderList" :show-overflow-tooltip="true" v-loading="loading" class="order-table" @selection-change="handleSelectionChange">
      <!-- 选择列：用于选择行数据 -->
      <el-table-column type="selection" width="55" />
      <!-- 订单编号列：显示订单的唯一标识符 -->
      <el-table-column prop="order_number" label="订单编号" width="150" />
      <!-- 订单日期列：显示订单创建日期，使用格式化函数处理日期显示 -->
      <el-table-column prop="order_date" label="订单日期" width="110">
        <template #default="{ row }">
          {{ formatDate(row.order_date) }}
        </template>
      </el-table-column>
      <!-- 客户名称列：显示客户名称，支持从关联对象或直接属性获取 -->
      <el-table-column label="客户名称" min-width="200">
        <template #default="{ row }">
          {{ (row.customer && row.customer.customer_name) || row.customer_name || '-' }}
        </template>
      </el-table-column>
      <!-- 产品名称列：显示产品名称，支持从关联对象或直接属性获取 -->
      <el-table-column label="产品名称" min-width="150">
        <template #default="{ row }">
          {{ (row.product && row.product.product_name) || row.product_name || '-' }}
        </template>
      </el-table-column>
      <!-- 婴儿名称列：显示婴儿姓名 -->
      <el-table-column prop="baby_name" label="婴儿名称" width="120" />
      <!-- 数量列：显示订购产品数量 -->
      <el-table-column prop="quantity" label="数量" width="60" />
      <!-- 单价列：显示产品单价，添加价格列样式 -->
      <el-table-column prop="unit_price" label="单价" width="100" class-name="price-column">
        <template #default="{ row }">
          ¥{{ row.unit_price }}
        </template>
      </el-table-column>


      <!-- 订单金额列：显示订单总金额，添加价格列样式 -->
      <el-table-column prop="total_amount" label="订单金额" width="120" class-name="price-column">
        <template #default="{ row }">
          ¥{{ row.total_amount }}
        </template>
      </el-table-column>
      <!-- 订单状态列：显示订单状态，使用标签组件和颜色区分不同状态 -->
      <el-table-column prop="status" label="订单状态" width="100">
        <template #default="{ row }">
          <!-- el-tag: Element Plus标签组件，用于显示状态标签 -->
          <el-tag :type="getStatusTagType(row.status)">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <!-- 照片列：显示是否包含照片，使用标签组件显示有/无状态 -->
      <el-table-column label="照片" width="60">
        <template #default="{ row }">
          <el-tag :type="row.photo ? 'success' : 'info'">
            {{ row.photo ? '有' : '无' }}
          </el-tag>
        </template>
      </el-table-column>
      <!-- 手脚印列：显示是否包含手脚印，使用标签组件显示有/无状态 -->
      <el-table-column label="手脚印" width="70">
        <template #default="{ row }">
          <el-tag :type="row.hand_foot_print ? 'success' : 'info'">
            {{ row.hand_foot_print ? '有' : '无' }}
          </el-tag>
        </template>
      </el-table-column>
      <!-- 胎毛列：显示是否包含胎毛，使用标签组件显示有/无状态 -->
      <el-table-column label="胎毛" width="60">
        <template #default="{ row }">
          <el-tag :type="row.baby_hair ? 'success' : 'info'">
            {{ row.baby_hair ? '有' : '无' }}
          </el-tag>
        </template>
      </el-table-column>
      <!-- 脐带列：显示是否包含脐带，使用标签组件显示有/无状态 -->
      <el-table-column label="脐带" width="60">
        <template #default="{ row }">
          <el-tag :type="row.umbilical_cord ? 'success' : 'info'">
            {{ row.umbilical_cord ? '有' : '无' }}
          </el-tag>
        </template>
      </el-table-column>
      <!--
      快递公司列：显示快递公司名称
      <el-table-column prop="express_company" label="快递公司" width="120" />
      -->
      <!--
      快递单号列：显示快递单号
      <el-table-column prop="express_number" label="快递单号" width="150" />
      -->
      <!-- 订单备注列：显示订单备注信息，支持文本溢出提示 -->
      <el-table-column prop="notes" label="订单备注" min-width="200" show-overflow-tooltip>
        <template #default="{ row }">
          {{ row.notes || '-' }}
        </template>
      </el-table-column>
      <!-- 操作列：包含查看、编辑、删除订单的操作按钮 -->
      <el-table-column label="操作" width="255" fixed="right">
        <template #default="{ row }">
          <!-- 打印按钮：打印单个订单 -->
          <el-button type="primary" size="small" @click="handlePrintOrder(row)">
            打印
          </el-button>
          <!-- 查看按钮：打开订单详情对话框 -->
          <el-button type="info" size="small" @click="handleView(row)">
            查看
          </el-button>
          <!-- 编辑按钮：打开订单编辑对话框 -->
          <el-button type="primary" size="small" @click="handleEdit(row)">
            编辑
          </el-button>
          <!-- 删除按钮：删除指定订单 -->
          <el-button type="danger" size="small" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件：支持订单列表的分页导航 -->
    <div class="pagination-container">
      <!-- el-pagination: Element Plus分页组件 -->
      <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total"
        :current-page="currentPage" :page-size="pageSize" :page-sizes="[10, 20, 30, 40, 100]"
        @current-change="handlePageChange" @size-change="handleSizeChange" />
    </div>
  </el-card>

  <!-- 订单详情对话框：以模态框形式展示订单详细信息 -->
  <!-- el-dialog: Element Plus对话框组件 -->
  <el-dialog v-model="detailDialogVisible" title="订单详情" width="700px" :close-on-click-modal="false">
    <!-- 详情内容区域：包含加载状态指示器 -->
    <div v-loading="detailLoading" class="detail-container">
      <!-- 订单详情描述列表：使用Element Plus的描述列表组件展示详细信息 -->
      <!-- el-descriptions: Element Plus描述列表组件 -->
      <el-descriptions :column="2" border>
        <!-- 订单编号项：显示订单编号 -->
        <el-descriptions-item label="订单编号">
          {{ orderDetail.order_number || '-' }}
        </el-descriptions-item>
        <!-- 订单日期项：显示订单日期，使用格式化函数处理显示 -->
        <el-descriptions-item label="订单日期">
          {{ formatDate(orderDetail.order_date) || '-' }}
        </el-descriptions-item>
        <!-- 客户名称项：显示客户名称，支持从关联对象或直接属性获取 -->
        <el-descriptions-item label="客户名称">
          {{ (orderDetail.customer && orderDetail.customer.customer_name) || orderDetail.customer_name || '-' }}
        </el-descriptions-item>
        <!-- 产品名称项：显示产品名称，支持从关联对象或直接属性获取 -->
        <el-descriptions-item label="产品名称">
          {{ (orderDetail.product && orderDetail.product.product_name) || orderDetail.product_name || '-' }}
        </el-descriptions-item>
        <!-- 婴儿名称项：显示婴儿姓名 -->
        <el-descriptions-item label="婴儿名称">
          {{ orderDetail.baby_name || '-' }}
        </el-descriptions-item>
        <!-- 数量项：显示订购产品数量 -->
        <el-descriptions-item label="数量">
          {{ orderDetail.quantity || '-' }}
        </el-descriptions-item>
        <!-- 单价项：显示产品单价 -->
        <el-descriptions-item label="单价">
          ¥{{ orderDetail.unit_price || '0.00' }}
        </el-descriptions-item>
        <!-- 小计项：显示订单小计金额 -->
        <el-descriptions-item label="小计">
          ¥{{ orderDetail.subtotal || '0.00' }}
        </el-descriptions-item>
        <!-- 订单金额项：显示订单总金额 -->
        <el-descriptions-item label="订单金额">
          ¥{{ orderDetail.total_amount || '0.00' }}
        </el-descriptions-item>
        <!-- 订单状态项：显示订单状态，使用标签组件和颜色区分不同状态 -->
        <el-descriptions-item label="订单状态">
          <el-tag :type="getStatusTagType(orderDetail.status)">
            {{ getStatusText(orderDetail.status) }}
          </el-tag>
        </el-descriptions-item>
        <!-- 照片项：显示是否包含照片，使用标签组件显示有/无状态 -->
        <el-descriptions-item label="照片">
          <el-tag :type="orderDetail.photo ? 'success' : 'info'">
            {{ orderDetail.photo ? '有' : '无' }}
          </el-tag>
        </el-descriptions-item>
        <!-- 手脚印项：显示是否包含手脚印，使用标签组件显示有/无状态 -->
        <el-descriptions-item label="手脚印">
          <el-tag :type="orderDetail.hand_foot_print ? 'success' : 'info'">
            {{ orderDetail.hand_foot_print ? '有' : '无' }}
          </el-tag>
        </el-descriptions-item>
        <!-- 胎毛项：显示是否包含胎毛，使用标签组件显示有/无状态 -->
        <el-descriptions-item label="胎毛">
          <el-tag :type="orderDetail.baby_hair ? 'success' : 'info'">
            {{ orderDetail.baby_hair ? '有' : '无' }}
          </el-tag>
        </el-descriptions-item>
        <!-- 脐带项：显示是否包含脐带，使用标签组件显示有/无状态 -->
        <el-descriptions-item label="脐带">
          <el-tag :type="orderDetail.umbilical_cord ? 'success' : 'info'">
            {{ orderDetail.umbilical_cord ? '有' : '无' }}
          </el-tag>
        </el-descriptions-item>
        <!--
        快递公司项：显示快递公司名称
        <el-descriptions-item label="快递公司">
          {{ orderDetail.express_company || '-' }}
        </el-descriptions-item>
        -->
        <!--
        快递单号项：显示快递单号
        <el-descriptions-item label="快递单号">
          {{ orderDetail.express_number || '-' }}
        </el-descriptions-item>
        -->
        <!-- 订单备注项：显示订单备注信息，跨两列显示 -->
        <el-descriptions-item label="订单备注" :span="2">
          {{ orderDetail.notes || '-' }}
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 对话框底部操作区域：包含关闭和编辑订单按钮 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="detailDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="handleEditFromDetail">
          编辑订单
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 编辑订单对话框：以模态框形式编辑订单信息 -->
  <el-dialog v-model="editDialogVisible" title="编辑订单" width="700px" :close-on-click-modal="false"
    @close="handleEditClose">
    <!-- 编辑表单区域：包含加载状态指示器和表单验证 -->
    <!-- el-form: Element Plus表单组件 -->
    <el-form ref="editFormRef" :model="editingOrder" :rules="editRules" label-width="100px" v-loading="editLoading">
      <!-- 使用栅格布局组织表单元素 -->
      <!-- el-row: Element Plus栅格行组件 -->
      <el-row :gutter="20">
        <!-- 客户选择：下拉选择客户，支持过滤搜索 -->
        <el-col :span="12">
          <!-- el-form-item: Element Plus表单项组件 -->
          <el-form-item label="客户" prop="customer_id">
            <!-- el-select: Element Plus下拉选择组件 -->
            <el-select v-model="editingOrder.customer_id" placeholder="请选择客户" style="width: 100%" filterable>
              <!-- 遍历客户选项，生成下拉选项 -->
              <el-option v-for="customer in customerOptions" :key="customer.customer_id" :label="customer.customer_name"
                :value="customer.customer_id" />
            </el-select>
          </el-form-item>
        </el-col>

        <!-- 订单日期：日期选择器，限制不能选择未来日期 -->
        <el-col :span="12">
          <el-form-item label="订单日期" prop="order_date">
            <!-- el-date-picker: Element Plus日期选择器组件 -->
            <el-date-picker v-model="editingOrder.order_date" type="date" placeholder="请选择订单日期" style="width: 100%"
              value-format="YYYY-MM-DD" :disabled-date="disabledDate" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <!-- 订单状态：下拉选择订单状态 -->
        <el-col :span="12">
          <el-form-item label="订单状态" prop="status">
            <el-select v-model="editingOrder.status" placeholder="请选择订单状态" style="width: 100%">
              <!-- 遍历订单状态配置，生成下拉选项 -->
              <el-option v-for="status in orderStatusConfig.statusOptions" :key="status.value" :label="status.label"
                :value="status.value" />
            </el-select>
          </el-form-item>
        </el-col>

        <!-- 订单金额：只读显示，自动计算得出 -->
        <el-col :span="12">
          <el-form-item label="订单金额">
            <!-- el-input: Element Plus输入框组件 -->
            <el-input v-model="orderTotalAmount" readonly placeholder="自动计算">
              <template #prefix>¥</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <!-- 产品选择：下拉选择产品，支持过滤搜索和显示价格信息 -->
        <el-col :span="12">
          <el-form-item label="产品" prop="product_id">
            <el-select v-model="editingOrder.product_id" placeholder="请选择产品" style="width: 100%" filterable
              @change="onProductChange">
              <!-- 遍历产品选项，生成下拉选项，显示产品名称和价格 -->
              <el-option v-for="product in productOptions" :key="product.product_id" :label="product.product_name"
                :value="product.product_id">
                <span style="float: left">{{ product.product_name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">¥{{ product.retail_price || product.price ||
                  product.wholesale_price }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <!-- 婴儿名称：输入框，输入婴儿姓名 -->
        <el-col :span="12">
          <el-form-item label="婴儿名称" prop="baby_name">
            <el-input v-model="editingOrder.baby_name" placeholder="请输入婴儿名称" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <!-- 数量：数字输入框，支持调整数量并自动计算小计 -->
        <el-col :span="8">
          <el-form-item label="数量" prop="quantity">
            <!-- el-input-number: Element Plus数字输入框组件 -->
            <el-input-number v-model="editingOrder.quantity" :min="1" controls-position="right"
              @change="calculateSubtotal" style="width: 100%" />
          </el-form-item>
        </el-col>

        <!-- 单价：数字输入框，支持调整单价并自动计算小计 -->
        <el-col :span="8">
          <el-form-item label="单价" prop="unit_price">
            <el-input-number v-model="editingOrder.unit_price" :min="0" :precision="2" controls-position="right"
              @change="calculateSubtotal" style="width: 100%" />
          </el-form-item>
        </el-col>

        <!-- 小计：只读输入框，自动计算显示小计金额 -->
        <el-col :span="8">
          <el-form-item label="小计" prop="subtotal">
            <el-input v-model="editingOrder.subtotal" readonly placeholder="自动计算">
              <template #prefix>¥</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 订单备注：文本域，输入订单备注信息 -->
      <el-form-item label="订单备注" prop="notes">
        <!-- type="textarea": 设置为文本域模式 -->
        <el-input v-model="editingOrder.notes" type="textarea" :rows="3" placeholder="请输入订单备注" />
      </el-form-item>

      <!-- 照片：开关组件，选择是否包含照片 -->
      <el-form-item label="照片" prop="photo">
        <!-- el-switch: Element Plus开关组件 -->
        <el-switch v-model="editingOrder.photo" :active-value="1" :inactive-value="0" active-text="有" inactive-text="无">
        </el-switch>
      </el-form-item>

      <!-- 手脚印：开关组件，选择是否包含手脚印 -->
      <el-form-item label="手脚印" prop="hand_foot_print">
        <el-switch v-model="editingOrder.hand_foot_print" :active-value="1" :inactive-value="0" active-text="有"
          inactive-text="无">
        </el-switch>
      </el-form-item>

      <!-- 胎毛：开关组件，选择是否包含胎毛 -->
      <el-form-item label="胎毛" prop="baby_hair">
        <el-switch v-model="editingOrder.baby_hair" :active-value="1" :inactive-value="0" active-text="有"
          inactive-text="无">
        </el-switch>
      </el-form-item>

      <!-- 脐带：开关组件，选择是否包含脐带 -->
      <el-form-item label="脐带" prop="umbilical_cord">
        <el-switch v-model="editingOrder.umbilical_cord" :active-value="1" :inactive-value="0" active-text="有"
          inactive-text="无">
        </el-switch>
      </el-form-item>

      <!--
      快递公司：输入框，输入快递公司名称
      <el-form-item label="快递公司" prop="express_company">
        <el-input v-model="editingOrder.express_company" placeholder="请输入快递公司名称" />
      </el-form-item>
      -->

      <!--
      快递单号：输入框，输入快递单号
      <el-form-item label="快递单号" prop="express_number">
        <el-input v-model="editingOrder.express_number" placeholder="请输入快递单号" />
      </el-form-item>
      -->
    </el-form>

    <!-- 对话框底部操作区域：包含取消和保存按钮 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <!-- :loading="saveLoading": 设置按钮加载状态 -->
        <el-button type="primary" @click="handleSave" :loading="saveLoading">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 批量修改订单状态对话框 -->
  <el-dialog v-model="batchUpdateDialogVisible" title="批量修改订单状态" width="500px" :close-on-click-modal="false">
    <el-form>
      <el-form-item label="新状态">
        <el-select v-model="newStatus" placeholder="请选择新状态" style="width: 100%">
          <el-option
            v-for="status in orderStatusConfig.statusOptions"
            :key="status.value"
            :label="status.label"
            :value="status.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div v-if="selectedOrders.length > 0">
      <p>将修改 {{ selectedOrders.length }} 个订单的状态为：{{ getStatusText(newStatus) || '未选择' }}</p>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="batchUpdateDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmBatchUpdateStatus" :loading="saveLoading">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
/**
 * 销售订单管理页面组件
 * 负责展示、搜索、新增、编辑、删除销售订单信息
 *
 * 功能概述：
 * 1. 订单列表展示：分页显示订单信息，支持多种筛选条件
 * 2. 订单搜索功能：支持按订单编号、客户名称、订单状态、日期范围、婴儿名称、产品名称搜索
 * 3. 订单详情查看：以模态框形式展示订单详细信息
 * 4. 订单编辑功能：以模态框形式编辑订单信息，支持自动计算金额
 * 5. 订单删除功能：支持删除订单，包含二次确认机制
 * 6. 订单新增功能：跳转到新增订单页面
 * 7. 订单打印功能：使用hiprint插件实现订单列表打印
 */

// 从Vue核心库中导入必要的函数
// ref: 创建响应式引用，用于包装基本类型数据
// reactive: 创建响应式对象，用于包装对象类型数据
// onMounted: 组件挂载时执行的生命周期钩子函数
// computed: 创建计算属性，用于声明式地描述响应式数据的计算逻辑
import { ref, reactive, onMounted, computed } from 'vue'

// 从Element Plus UI库中导入消息和对话框组件
// ElMessage: 消息提示组件，用于显示操作结果提示
// ElMessageBox: 对话框组件，用于显示确认对话框
import { ElMessage, ElMessageBox } from 'element-plus'

// 导入订单列表打印模板工具类
import OrderListPrintTemplate from '@/utils/OrderListPrintTemplate'
// 导入单个订单打印模板工具类
import OrderPrintTemplate from '@/utils/OrderPrintTemplate'

// 创建打印模板实例
const orderListPrintTemplate = new OrderListPrintTemplate()
const orderPrintTemplate = new OrderPrintTemplate()

// 从销售订单API模块中导入相关函数
// getOrderList: 获取订单列表，支持分页和搜索
// deleteOrder: 删除指定订单
// getOrderById: 根据ID获取订单详情
// updateOrder: 更新订单信息
// createOrder: 创建新订单
import {
  getOrderList,
  deleteOrder,
  getOrderById,
  updateOrder,
  createOrder
} from '@/api/SalesOrders'

// 从客户API模块中导入获取客户列表函数
// getCustomerList: 获取客户列表，用于填充客户下拉选项
import { getCustomerList } from '@/api/Customers'

// 从产品API模块中导入获取产品列表函数
// getProductList: 获取产品列表，用于填充产品下拉选项
import { getProductList } from '@/api/Products'

// 导入订单状态配置
// 包含订单状态的标签文本、标签类型和状态值映射关系
import orderStatusConfig from '@/utils/orderStatusConfig'

// 从Element Plus UI库中导入图标组件
// Search: 搜索图标
// Refresh: 刷新图标
// Plus: 加号图标
// Printer: 打印图标
// Delete: 删除图标
// Edit: 编辑图标
// Download: 下载图标
import { Search, Refresh, Plus, Printer, Delete, Edit, Download } from '@element-plus/icons-vue'

// 获取路由实例，用于页面跳转
import { useRouter } from 'vue-router'
const router = useRouter()

// 响应式数据定义
const orderList = ref([])           // 订单列表数据，存储从API获取的订单数组
const loading = ref(false)          // 列表加载状态，控制表格加载指示器显示
const total = ref(0)                // 总数据条数，用于分页组件显示总记录数
const currentPage = ref(1)          // 当前页码，控制分页组件当前页
const pageSize = ref(10)            // 每页条数，控制分页组件每页显示记录数
const selectedOrders = ref([])      // 选中的订单列表
const batchUpdateDialogVisible = ref(false)  // 批量修改状态对话框显示状态
const newStatus = ref('')           // 新的状态值

// 搜索表单数据，使用reactive创建响应式对象
const searchForm = reactive({
  orderNumber: '',      // 订单编号搜索条件
  customerName: '',     // 客户名称搜索条件
  status: '',           // 订单状态搜索条件
  orderDateRange: [],   // 订单日期范围搜索条件
  babyName: '',         // 婴儿名称搜索条件
  productName: ''       // 产品名称搜索条件
})

// 客户和产品选项，用于填充下拉选择框
const customerOptions = ref([])     // 客户选项列表
const productOptions = ref([])      // 产品选项列表

// 详情对话框相关状态
const detailDialogVisible = ref(false)  // 详情对话框显示状态，控制对话框显示/隐藏
const detailLoading = ref(false)        // 详情加载状态，控制详情对话框加载指示器显示
const orderDetail = ref({})             // 订单详情数据，存储当前查看的订单详细信息

// 编辑对话框相关状态
const editDialogVisible = ref(false)    // 编辑对话框显示状态，控制对话框显示/隐藏
const editLoading = ref(false)          // 编辑加载状态，控制编辑对话框加载指示器显示
const saveLoading = ref(false)          // 保存按钮加载状态，控制保存按钮加载指示器显示
const editFormRef = ref(null)           // 编辑表单引用，用于访问表单实例进行验证等操作
const editingOrder = ref({
  customer_id: '',        // 客户ID
  order_date: '',         // 订单日期
  status: 1,              // 订单状态，默认值为1（已下单）
  notes: '',              // 订单备注
  product_id: '',         // 产品ID
  quantity: 1,            // 数量，默认值为1
  unit_price: 0.00,       // 单价，默认值为0.00
  subtotal: 0.00,         // 小计，默认值为0.00
  baby_name: '',          // 婴儿名称
  photo: 0,               // 照片，0表示无，1表示有
  hand_foot_print: 0,     // 手脚印，0表示无，1表示有
  baby_hair: 0,           // 胎毛，0表示无，1表示有
  umbilical_cord: 0,      // 脐带，0表示无，1表示有
  /*express_company: '',*/    // 快递公司名称
  /*express_number: ''*/      // 快递单号
})

// 计算订单总金额
// 使用computed创建计算属性，当editingOrder.subtotal变化时自动重新计算
const orderTotalAmount = computed(() => {
  return editingOrder.value.subtotal || '0.00'
})

// 编辑表单验证规则
// 定义各表单字段的验证规则，确保用户输入的数据符合要求
const editRules = {
  // 客户ID验证规则：必填项
  customer_id: [
    { required: true, message: '请选择客户', trigger: 'change' }
  ],
  // 订单日期验证规则：必填项
  order_date: [
    { required: true, message: '请选择订单日期', trigger: 'change' }
  ],
  // 订单状态验证规则：必填项
  status: [
    { required: true, message: '请选择订单状态', trigger: 'change' }
  ],
  // 产品ID验证规则：必填项
  product_id: [
    { required: true, message: '请选择产品', trigger: 'change' }
  ],
  // 数量验证规则：必填项
  quantity: [
    { required: true, message: '请输入数量', trigger: 'change' }
  ],
  // 单价验证规则：必填项
  unit_price: [
    { required: true, message: '请输入单价', trigger: 'change' }
  ],
  // 小计验证规则：必填项
  subtotal: [
    { required: true, message: '请输入小计', trigger: 'change' }
  ]
}

/**
 * 禁用未来日期
 * @param {Date} date - 日期对象
 * @returns {boolean} 是否禁用该日期
 *
 * 该函数用于限制订单日期选择器，禁止选择未来日期
 * 通过比较传入日期与当前时间，如果日期大于当前时间则返回true表示禁用
 */
const disabledDate = (date) => {
  // 返回true表示禁用该日期，禁止选择未来日期
  return date.getTime() > Date.now()
}

/**
 * 格式化日期显示
 * @param {string} date - 日期字符串
 * @returns {string} 格式化后的日期
 *
 * 将日期字符串格式化为本地日期格式
 * 如果传入的日期为空，则返回默认值'-'
 * 否则创建Date对象并格式化为中文本地日期字符串
 */
const formatDate = (date) => {
  // 如果日期为空，返回默认值
  if (!date) return '-'
  // 创建Date对象并格式化为本地日期字符串
  const d = new Date(date)
  return d.toLocaleDateString('zh-CN')
}

/**
 * 获取订单状态文本
 * @param {number} status - 订单状态代码
 * @returns {string} 状态文本
 *
 * 根据状态代码获取对应的显示文本
 * 通过调用orderStatusConfig模块的getStatusLabel方法获取状态文本
 */
const getStatusText = (status) => {
  return orderStatusConfig.getStatusLabel(status)
}

/**
 * 获取订单状态标签类型
 * @param {number} status - 订单状态代码
 * @returns {string} 标签类型
 *
 * 根据状态代码获取Element UI标签类型
 * 通过调用orderStatusConfig模块的getStatusTagType方法获取标签类型
 * 不同的状态使用不同的标签颜色进行区分
 */
const getStatusTagType = (status) => {
  return orderStatusConfig.getStatusTagType(status)
}

/**
 * 处理表格行选择变化
 * @param {Array} selection - 选中的行数据数组
 */
const handleSelectionChange = (selection) => {
  selectedOrders.value = selection
}

/**
 * 获取订单列表数据
 *
 * 从API获取订单列表数据并更新页面状态
 * 支持分页和多种搜索条件
 * 处理API响应数据并更新组件的响应式数据
 */
const getOrderListData = async () => {
  try {
    // 设置加载状态为true，显示加载指示器
    loading.value = true

    // 处理日期范围参数，将日期范围数组转换为开始日期和结束日期字符串
    let startDate = '';
    let endDate = '';
    if (searchForm.orderDateRange && searchForm.orderDateRange.length === 2) {
      startDate = searchForm.orderDateRange[0];
      endDate = searchForm.orderDateRange[1];
    }

    // 构建分页参数对象，包含分页信息和搜索条件
    const params = {
      page: currentPage.value,        // 当前页码
      pageSize: pageSize.value,       // 每页条数
      // 添加搜索参数
      orderNumber: searchForm.orderNumber,      // 订单编号搜索条件
      customerName: searchForm.customerName,    // 客户名称搜索条件
      status: searchForm.status,                // 订单状态搜索条件
      startDate: startDate,                     // 开始日期搜索条件
      endDate: endDate,                         // 结束日期搜索条件
      babyName: searchForm.babyName,            // 婴儿名称搜索条件
      productName: searchForm.productName       // 产品名称搜索条件
    }

    // 调用API获取订单列表
    const res = await getOrderList(params)

    // 根据已知的API响应结构直接处理数据
    if (res.data && Array.isArray(res.data.orders)) {
      // 设置订单列表数据
      orderList.value = res.data.orders

      // 更新分页信息
      if (res.data.pagination) {
        total.value = res.data.pagination.totalCount || 0           // 总记录数
        currentPage.value = res.data.pagination.currentPage || 1    // 当前页码
        pageSize.value = res.data.pagination.pageSize || 20         // 每页条数
      }
    } else {
      // 如果数据结构不符合预期，设置为空数组
      orderList.value = []
      total.value = 0
    }
  } catch (error) {
    // 错误处理：记录错误日志并显示错误提示
    console.error('获取订单列表失败:', error)
    ElMessage.error('获取订单列表失败，请稍后重试！')
    // 出错时重置数据
    orderList.value = []
    total.value = 0
  } finally {
    // 无论成功或失败，最后都将加载状态设置为false
    loading.value = false
  }
}

/**
 * 获取客户和产品选项数据
 *
 * 用于填充下拉选择框的选项数据
 * 分别调用客户和产品API获取数据并更新选项列表
 */
const getOptionsData = async () => {
  try {
    // 获取客户列表，设置较大的pageSize以获取所有客户数据
    const customerRes = await getCustomerList({ pageSize: 1000 })
    customerOptions.value = customerRes.data || []

    // 获取产品列表，设置较大的pageSize以获取所有产品数据
    const productRes = await getProductList({ pageSize: 1000 })
    productOptions.value = productRes.data || []
  } catch (error) {
    // 错误处理：记录错误日志并显示错误提示
    console.error('获取选项数据失败:', error)
    ElMessage.error('获取选项数据失败，请稍后重试！')
  }
}

/**
 * 计算订单小计
 *
 * 根据数量和单价计算订单小计金额
 * 结果保留两位小数
 */
const calculateSubtotal = () => {
  // 获取数量和单价，确保转换为数字类型
  const quantity = parseFloat(editingOrder.value.quantity) || 0
  const unitPrice = parseFloat(editingOrder.value.unit_price) || 0
  // 计算小计并保留两位小数
  editingOrder.value.subtotal = (quantity * unitPrice).toFixed(2)
}

/**
 * 当产品选择变化时
 * @param {string} productId - 产品ID
 *
 * 当用户选择产品时，自动填充单价并重新计算小计
 * 从产品选项列表中查找选中产品的价格信息
 */
const onProductChange = (productId) => {
  // 如果没有选择产品，重置单价和小计
  if (!productId) {
    editingOrder.value.unit_price = 0.00
    editingOrder.value.subtotal = 0.00
    return
  }

  // 查找选中的产品
  const selectedProduct = productOptions.value.find(product => product.product_id === productId)
  if (selectedProduct) {
    // 设置单价为产品零售价，确保是数字类型
    // 按优先级获取价格：零售价 > 价格 > 批发价
    editingOrder.value.unit_price = parseFloat(selectedProduct.retail_price) ||
      parseFloat(selectedProduct.price) ||
      parseFloat(selectedProduct.wholesale_price) || 0.00

    // 确保数量至少为1
    if (!editingOrder.value.quantity || editingOrder.value.quantity < 1) {
      editingOrder.value.quantity = 1
    }
    // 重新计算小计
    calculateSubtotal()
  }
}

/**
 * 页码改变事件处理函数
 * @param {number} page - 新的页码
 *
 * 当用户切换页码时，重新加载对应页的数据
 * 更新当前页码并调用获取订单列表函数
 */
const handlePageChange = (page) => {
  // 更新当前页码
  currentPage.value = page
  // 重新获取订单列表数据
  getOrderListData()
}

/**
 * 每页条数改变事件处理函数
 * @param {number} size - 新的每页条数
 *
 * 当用户更改每页显示条数时，重新加载数据
 * 更新每页条数，重置到第一页并重新获取数据
 */
const handleSizeChange = (size) => {
  // 更新每页条数
  pageSize.value = size
  // 重置到第一页
  currentPage.value = 1
  // 重新获取订单列表数据
  getOrderListData()
}

/**
 * 搜索按钮点击事件处理函数
 *
 * 执行订单搜索操作
 * 重置到第一页并获取订单列表数据
 */
const handleSearch = () => {
  // 记录搜索操作日志
  console.log('执行搜索:', searchForm)
  // 根据分页功能实现规范：搜索操作时重置到第一页
  currentPage.value = 1
  // 获取订单列表数据
  getOrderListData()
}

/**
 * 重置按钮点击事件处理函数
 *
 * 重置搜索条件并重新加载数据
 * 清空搜索表单并重置到第一页
 */
const handleReset = () => {
  // 记录重置操作日志
  console.log('重置搜索条件')
  // 清空搜索表单，使用Object.assign方法重置所有搜索条件
  Object.assign(searchForm, {
    orderNumber: '',
    customerName: '',
    status: '',
    orderDateRange: [],
    babyName: '',
    productName: ''
  })
  // 重置到第一页
  currentPage.value = 1
  // 重新获取订单列表数据
  getOrderListData()
}

/**
 * 查看订单详情
 * @param {Object} row - 订单数据行
 *
 * 显示订单详情对话框
 * 调用API获取订单详情并填充到详情对话框中
 */
const handleView = async (row) => {
  // 记录查看操作日志
  console.log('查看订单:', row)

  try {
    // 显示详情对话框
    detailDialogVisible.value = true
    // 设置详情加载状态为true，显示加载指示器
    detailLoading.value = true

    // 调用API获取订单详情
    const response = await getOrderById(row.order_id)

    // 根据实际API响应结构调整数据赋值
    if (response.data) {
      // 如果响应包含data字段，使用data字段的数据
      orderDetail.value = response.data
    } else {
      // 否则直接使用响应数据
      orderDetail.value = response
    }
  } catch (error) {
    // 错误处理：记录错误日志并显示错误提示
    console.error('获取订单详情失败:', error)
    ElMessage.error('获取订单详情失败，请稍后重试！')

    // 如果API调用失败，使用列表中的数据作为后备方案
    orderDetail.value = row
  } finally {
    // 无论成功或失败，最后都将详情加载状态设置为false
    detailLoading.value = false
  }
}

/**
 * 从详情对话框跳转到编辑
 *
 * 关闭详情对话框并打开编辑对话框
 * 将当前查看的订单详情传递给编辑对话框
 */
const handleEditFromDetail = () => {
  // 关闭详情对话框
  detailDialogVisible.value = false
  // 确保传递的是订单详情数据
  handleEdit(orderDetail.value)
}

/**
 * 新增订单按钮点击事件处理函数
 *
 * 跳转到添加订单页面
 * 使用Vue Router导航到新增订单页面
 */
const handleAdd = () => {
  // 跳转到添加订单页面
  router.push('/orders/add')
}

/**
 * 编辑订单
 * @param {Object} row - 订单数据行
 *
 * 打开编辑对话框并填充订单数据
 * 处理订单数据并初始化编辑表单
 */
const handleEdit = (row) => {
  // 记录编辑操作日志
  console.log('编辑订单:', row);

  // 确保订单状态是数字代码而不是字符串
  let orderStatus = row.status || 1;
  if (typeof orderStatus === 'string') {
    // 如果状态是字符串，通过配置获取对应的数字代码
    orderStatus = orderStatusConfig.getStatusValueByLabel(orderStatus);
  }

  // 填充编辑表单数据，处理各种字段的初始化
  editingOrder.value = {
    order_id: row.order_id || '',                                         // 订单ID
    customer_id: row.customer_id || (row.customer && row.customer.customer_id) || '',  // 客户ID
    order_date: row.order_date || '',                                     // 订单日期
    status: orderStatus,                                                  // 订单状态（确保使用数字代码）
    notes: row.notes || '',                                               // 订单备注
    product_id: row.product_id || (row.product && row.product.product_id) || '',      // 产品ID
    quantity: parseInt(row.quantity, 10) || 1,                            // 数量（确保是整数）
    unit_price: parseFloat(row.unit_price) || 0,                          // 单价（确保是浮点数）
    subtotal: parseFloat(row.subtotal) || 0,                              // 小计（确保是浮点数）
    baby_name: row.baby_name || '',                                       // 婴儿名称
    photo: row.photo || 0,                                                // 照片状态
    hand_foot_print: row.hand_foot_print || 0,                            // 手脚印状态
    baby_hair: row.baby_hair || 0,                                        // 胎毛状态
    umbilical_cord: row.umbilical_cord || 0,                              // 脐带状态
    /*express_company: row.express_company || '',*/                           // 快递公司名称
    /*express_number: row.express_number || ''*/                              // 快递单号
  }

  // 显示编辑对话框
  editDialogVisible.value = true
}

/**
 * 编辑对话框关闭事件处理函数
 *
 * 关闭编辑对话框时的清理工作
 * 重置表单验证状态
 */
const handleEditClose = () => {
  // 重置表单验证状态，清除验证错误信息
  editFormRef.value?.resetFields()
}

/**
 * 保存订单信息（新增或编辑）
 *
 * 提交订单数据到后端API
 * 根据是否有order_id判断是新增还是编辑操作
 */
const handleSave = async () => {
  // 表单验证，确保用户输入的数据符合验证规则
  try {
    await editFormRef.value.validate()
  } catch (error) {
    // 验证失败处理：记录错误日志并显示警告提示
    console.error('表单验证失败:', error)
    ElMessage.warning('请填写完整的订单信息')
    return
  }

  try {
    // 设置保存按钮加载状态为true，显示加载指示器
    saveLoading.value = true

    // 确保订单状态是数字代码而不是字符串
    let orderStatus = editingOrder.value.status;
    if (typeof orderStatus === 'string') {
      // 如果状态是字符串，通过配置获取对应的数字代码
      orderStatus = orderStatusConfig.getStatusValueByLabel(orderStatus);
    }

    // 准备提交数据，构建要发送到后端的数据对象
    const submitData = {
      customer_id: editingOrder.value.customer_id,        // 客户ID
      order_date: editingOrder.value.order_date,          // 订单日期
      status: orderStatus,                                // 订单状态
      notes: editingOrder.value.notes,                    // 订单备注
      product_id: editingOrder.value.product_id,          // 产品ID
      quantity: editingOrder.value.quantity,              // 数量
      unit_price: editingOrder.value.unit_price,          // 单价
      subtotal: editingOrder.value.subtotal,              // 小计
      baby_name: editingOrder.value.baby_name,            // 婴儿名称
      photo: editingOrder.value.photo,                    // 照片状态
      hand_foot_print: editingOrder.value.hand_foot_print, // 手脚印状态
      baby_hair: editingOrder.value.baby_hair,            // 胎毛状态
      umbilical_cord: editingOrder.value.umbilical_cord,  // 脐带状态
      /*express_company: editingOrder.value.express_company,*/ // 快递公司名称
      /*express_number: editingOrder.value.express_number,*/   // 快递单号
      total_amount: editingOrder.value.subtotal           // 总金额等于小计
    }

    // 根据是否有order_id判断是新增还是编辑
    if (editingOrder.value.order_id) {
      // 编辑订单：添加订单ID并调用更新接口
      submitData.order_id = editingOrder.value.order_id
      await updateOrder(submitData)
      ElMessage.success('更新订单成功！')
    } else {
      // 新增订单：调用创建接口
      await createOrder(submitData)
      ElMessage.success('新增订单成功！')
    }

    // 关闭编辑对话框
    editDialogVisible.value = false

    // 重新加载列表数据以反映最新更改
    getOrderListData()
  } catch (error) {
    // 错误处理：记录错误日志并显示错误提示
    console.error('保存订单失败:', error)
    ElMessage.error(`保存订单失败：${error.msg || error.message || '请稍后重试！'}`)
  } finally {
    // 无论成功或失败，最后都将保存按钮加载状态设置为false
    saveLoading.value = false
  }
}

/**
 * 删除订单
 * @param {Object} row - 订单数据行
 *
 * 删除指定订单并重新加载列表
 * 包含二次确认机制以防止误删
 */
const handleDelete = async (row) => {
  try {
    // 使用ElMessageBox进行二次确认，确保用户确实要删除订单
    await ElMessageBox.confirm(
      `确定要删除订单 "${row.order_number || row.order_id}" 吗？此操作不可恢复！`,
      '删除确认',
      {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: false
      }
    )

    // 调用删除API删除指定订单
    await deleteOrder(row.order_id)

    // 删除成功提示
    ElMessage.success('删除订单成功！')

    // 重新加载列表数据
    // 如果当前页只有一条数据且不是第一页，则回退到上一页以避免空页
    if (orderList.value.length === 1 && currentPage.value > 1) {
      currentPage.value = currentPage.value - 1
    }
    getOrderListData()
  } catch (error) {
    // 用户取消删除或删除失败处理
    if (error !== 'cancel') {
      // 如果不是用户取消操作，则记录错误日志并显示错误提示
      console.error('删除订单失败:', error)
      ElMessage.error('删除订单失败，请稍后重试！')
    }
  }
}

/**
 * 使用vue-plugin-hiprint插件实现订单列表打印功能
 * 创建打印模板并执行打印预览
 */
const handleOrderListPrint = () => {
  // 调用订单列表打印模板工具类的打印方法
  orderListPrintTemplate.print(orderList.value, formatDate)
}

/**
 * 批量删除订单
 */
const handleBatchDelete = async () => {
  try {
    // 确认是否删除
    await ElMessageBox.confirm(
      `确定要删除选中的 ${selectedOrders.value.length} 个订单吗？此操作不可恢复！`,
      '删除确认',
      {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    // 批量删除选中的订单
    const deletePromises = selectedOrders.value.map(order => deleteOrder(order.order_id))
    await Promise.all(deletePromises)

    ElMessage.success('批量删除成功！')

    // 清空选中项
    selectedOrders.value = []

    // 重新加载列表数据
    getOrderListData()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量删除订单失败:', error)
      ElMessage.error('批量删除订单失败，请稍后重试！')
    }
  }
}

/**
 * 批量修改订单状态
 */
const handleBatchUpdateStatus = () => {
  // 显示批量修改状态对话框
  batchUpdateDialogVisible.value = true
  // 初始化状态值为空
  newStatus.value = ''
}

/**
 * 确认批量修改订单状态
 */
const confirmBatchUpdateStatus = async () => {
  if (!newStatus.value) {
    ElMessage.warning('请选择新状态')
    return
  }

  try {
    saveLoading.value = true

    // 批量更新选中订单的状态
    const updatePromises = selectedOrders.value.map(order => {
      const updateData = {
        order_id: order.order_id,
        status: newStatus.value
      }
      return updateOrder(updateData)
    })

    await Promise.all(updatePromises)

    ElMessage.success('批量修改订单状态成功！')

    // 关闭对话框
    batchUpdateDialogVisible.value = false

    // 清空选中项
    selectedOrders.value = []

    // 重新加载列表数据
    getOrderListData()
  } catch (error) {
    console.error('批量修改订单状态失败:', error)
    ElMessage.error('批量修改订单状态失败，请稍后重试！')
  } finally {
    saveLoading.value = false
  }
}

/**
 * 打印单个订单
 * @param {Object} order - 订单数据
 */
const handlePrintOrder = (order) => {
  // 调用单个订单打印模板工具类的打印方法
  orderPrintTemplate.print(order)
}

/**
 * 导出订单列表为Excel文件
 */
const handleExportExcel = () => {
  try {
    // 动态导入xlsx库
    import('xlsx').then(XLSX => {
      // 创建工作簿
      const wb = XLSX.utils.book_new();

      // 处理导出数据，将订单数据转换为适合导出的格式
      const exportData = orderList.value.map(order => {
        return {
          '订单编号': order.order_number,
          '订单日期': formatDate(order.order_date),
          '客户名称': (order.customer && order.customer.customer_name) || order.customer_name || '-',
          '产品名称': (order.product && order.product.product_name) || order.product_name || '-',
          '婴儿名称': order.baby_name || '-',
          '数量': order.quantity || 0,
          '单价': `¥${order.unit_price || 0}`,
          '订单金额': `¥${order.total_amount || 0}`,
          '订单状态': getStatusText(order.status),
          '照片': order.photo ? '有' : '无',
          '手脚印': order.hand_foot_print ? '有' : '无',
          '胎毛': order.baby_hair ? '有' : '无',
          '脐带': order.umbilical_cord ? '有' : '无',
          /*'快递公司': order.express_company || '-',*/
          /*'快递单号': order.express_number || '-',*/
          '订单备注': order.notes || '-'
        };
      });

      // 创建工作表
      const ws = XLSX.utils.json_to_sheet(exportData);

      // 设置列宽
      const colWidths = [
        { wch: 15 }, // 订单编号
        { wch: 12 }, // 订单日期
        { wch: 20 }, // 客户名称
        { wch: 15 }, // 产品名称
        { wch: 12 }, // 婴儿名称
        { wch: 8 },  // 数量
        { wch: 10 }, // 单价
        { wch: 12 }, // 订单金额
        { wch: 10 }, // 订单状态
        { wch: 8 },  // 照片
        { wch: 8 },  // 手脚印
        { wch: 8 },  // 胎毛
        { wch: 8 },  // 脐带
        /*{ wch: 15 },*/ // 快递公司
        /*{ wch: 20 },*/ // 快递单号
        { wch: 25 }  // 订单备注
      ];
      ws['!cols'] = colWidths;

      // 将工作表添加到工作簿
      XLSX.utils.book_append_sheet(wb, ws, '销售订单列表');

      // 导出文件
      XLSX.writeFile(wb, `销售订单列表_${new Date().toLocaleDateString()}.xlsx`);

      ElMessage.success('导出Excel成功！');
    }).catch(error => {
      console.error('导出Excel失败:', error);
      ElMessage.error('导出Excel失败，请稍后重试！');
    });
  } catch (error) {
    console.error('导出Excel失败:', error);
    ElMessage.error('导出Excel失败，请稍后重试！');
  }
};

// 组件挂载时获取订单列表数据和选项数据
// 在组件初始化时加载必要的数据
onMounted(() => {
  // 获取订单列表数据
  getOrderListData()
  // 获取客户和产品选项数据
  getOptionsData()

})
</script>

<style scoped>
/**
 * 销售订单管理页面样式部分
 * 使用scoped属性确保样式只作用于当前组件
 */

/* 搜索容器样式 */
.search-container {
  margin-bottom: 20px;
}

/* 搜索卡片样式 */
.search-card {
  border: 1px solid #e4e7ed;
}

/* 搜索表单样式 */
.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 0;
}

/* 搜索表单项样式 */
.search-form .el-form-item {
  margin-bottom: 0;
  flex: 0 0 auto;
}

/* 搜索输入框样式 */
.search-input {
  width: 150px;
}

/* 搜索选择框样式 */
.search-select {
  width: 150px;
}

/* 日期范围选择器样式 */
.date-range-picker {
  width: 220px;
}

/* 按钮组样式 */
.button-group {
  display: flex;
  gap: 10px;
  margin-left: auto !important;
}

/* 搜索按钮样式 */
.search-button {
  white-space: nowrap;
}

/* 重置按钮样式 */
.reset-button {
  white-space: nowrap;
}

/* 表格卡片样式 */
.table-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 表格头部样式 */
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* 表格头部标题样式 */
.table-header span {
  font-size: 16px;
  font-weight: bold;
}

/* 表格头部按钮组样式 */
.table-header>div {
  display: flex;
  gap: 10px;
}

/* 订单数据表格 */
.order-table {
  width: 100%;
}

/* 分页容器样式 */
.pagination-container {
  text-align: right;
  margin-top: 20px;
}

/* 详情容器样式 */
.detail-container {
  min-height: 200px;
}

/* 对话框底部操作区域样式 */
.dialog-footer {
  text-align: right;
}

/* 价格列样式 */
.price-column {
  text-align: right;
}

/* 对话框表单项样式 */
.dialog-form-item {
  margin-bottom: 18px;
}

/* 对话框输入框样式 */
.dialog-input {
  width: 100%;
}

/* 对话框选择框样式 */
.dialog-select {
  width: 100%;
}

/* 对话框日期选择器样式 */
.dialog-date-picker {
  width: 100%;
}

/* 对话框文本域样式 */
.dialog-textarea {
  width: 100%;
}

/* 对话框开关样式 */
.dialog-switch {
  display: block;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .search-form {
    flex-direction: column;
  }

  .search-form .el-form-item {
    width: 100%;
  }

  .search-input,
  .search-select,
  .date-range-picker {
    width: 100%;
  }

  .button-group {
    margin-left: 0 !important;
    width: 100%;
    justify-content: center;
  }

  .table-header {
    flex-direction: column;
    align-items: stretch;
  }

  .table-header>div {
    justify-content: center;
  }
}
</style>


